<template>
  <div class="box">
    <!-- 批量传递props数据使用 v-bind="对象" 其实就是把对象展开一个个传递进去的 -->
    <!-- 子组件一个一个接收 -->
    <Item
      v-for="data in shopCar"
      :key="data.id"
      v-bind="data"
      :increase="increase"
      :decrease="decrease"
    />
    <hr />
    <p>总共有{{ total }}件商品</p>
  </div>
</template>

<script>
  import Item from "./components/Item.vue";
  import { nanoid } from "nanoid";

  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {
        shopCar: [
          {
            id: nanoid(),
            name: "iphone14",
            desc: "more strong",
            num: 1,
          },
          {
            id: nanoid(),
            name: "小米",
            desc: "xiaomi",
            num: 2,
          },
          {
            id: nanoid(),
            name: "华为",
            desc: "huaweiP40",
            num: 3,
          },
        ],
      };
    },
    computed: {
      /* 
        a.在reduce使用的过程中，如果有第二个参数
          默认参数二就是起始的默认值
        b.回调函数的参数中，参数1是每次return的结果
        参数2是当前项
        参数3是索引
        参数4是原数组
        c.如果没有第二个参数，默认回调函数的参数1是数组的第一项
        d.返回值是最终累加拼接或者计算的结果
      */
      // total() {
      //   return this.shopCar.reduce((p, c) => p + c.num, 0); //p的初始值是0 ,c=shopCar , p+num return的结果给 p ,
      //   // reduce会遍历shopCar的每一项 累加num
      // },
      total() {
        return this.shopCar.reduce((p, c) => p + c.num, 0);
      },
    },
    methods: {
      increase(id) {
        // 子组件传点击的按钮的li的id
        this.shopCar.forEach((item) => {
          if (item.id === id) {
            item.num++;
          }
        });
      },
      decrease(id) {
        this.shopCar.forEach((item) => {
          if (item.id === id) {
            item.num--;
          }
        });
      },
    },
  };
</script>

<style>
  /* .box{
    background: lightblue;
  } */
</style>
